<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>

<script type="text/javascript">
		var ctx = '${ctx}';
		
		setCtx(ctx);
	</script>
		<section>
			<div style="height: 40px; line-height: 40px;">
				<div class="forword_area"></div>
				<div class="location">
					当前位置：${sessionScope.currcent_position}</div>
			</div>
			<hr>
			<section>
				<!--begin 搜索栏 -->
				<div class="panel">
					<div style="float:left;height: 28px;">
						<input id="pageName" type="text" maxlength="20" value="${(not empty pageName)? pageName : ''  }" class="input-sm" placeholder="名称">
					</div>
					<div class="btn-group">
						<select class="dropdown-menu" id="pSize">
							<c:forEach items="${pageSizes }" var="item">
								<option value="${item.value }"
									<c:if test="${pSize == item.value }">selected</c:if>>&nbsp;&nbsp;&nbsp;${item.label }</option>
							</c:forEach>
						</select>
					</div>
					<div class="form-control">
						<div class="search" onclick="getYellowPageList();">
							<img src="${ctx }/images/table/search_second.png">
						</div>
						<div class="search" onclick="saveOrUpdatePage();">
							<img src="${ctx }/images/table/add_second.png">
						</div>
						<div class="delete" style="float: left;"
							onclick="deleteByIds();">
							<img src="${ctx }/images/table/del_second.png">  
						</div>
							<div style="width:70px;height:25px;margin-left:10px;padding-top:3px;padding-left:10px;background-color:#37ced4;
							color:white;cursor: pointer;float:left;" onclick="initYellowPage();">批量导入</div>
							<div style="width:45px;height:25px;margin-left:10px;padding-top:3px;padding-left:10px;background-color:#37ced4;
							color:white;cursor: pointer;float:left;" onclick="exportExcel();">导出</div>
					</div>
				</div>
				<!--end 搜索栏 -->

				<!--begin table表格 -->
				<div>
					<table class="table">
						<thead>
							<tr>
								<th width="3%">
									<img id="all" onclick="selectAll(this)" src="${ctx }/images/tables/wugou.png" style="margin-bottom: 1px;">
								</th>
								<th width="5%">序号</th>
								<th width="10%">名称</th>
								<th width="10%">电话号码1</th>
								<th width="10%">电话号码2</th>
								<th width="20%">地址</th>
								<th width="10%">操作</th>
							</tr>
						</thead>
						<tbody id="tableTbody">
							<c:forEach items="${yellowPage.list }" var="yellowPage" varStatus="yellowPageStatus">
								<tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
									<td><img id="yellowPage${yellowPage.id}" name="yellowPageChecked" class="${yellowPage.id}" 
												onclick="selectOne('${yellowPage.id}',this)"
												src="${ctx }/images/tables/wugou.png"></td>
									<td>${yellowPageStatus.index + 1 }</td>
									<%-- <c:choose>
				                        <c:when test="${fn:length(yellowPage.pageName) > 8}">
				                        	<td id="paNa${yellowPage.id}" onmouseover="mouseOverPage(${yellowPage.id} ,'${yellowPage.pageName}')" onmouseout="mouseOutPage(${yellowPage.id} , '${yellowPage.pageName}')">${fn:substring(yellowPage.pageName , 0 , 8)}...</td>
				                        </c:when>
				                        <c:otherwise>
				                        	<td id="paNa${yellowPage.id}">${yellowPage.pageName}</td>
				                        </c:otherwise>
				                    </c:choose> --%>
				                    <td>${yellowPage.pageName}</td>
									<td>${yellowPage.phone0}</td>
									<td>${yellowPage.phone1}</td>
									<c:choose>
				                        <c:when test="${fn:length(yellowPage.addr) > 15}">
				                        	<td id="addr${yellowPage.id}" onmouseover="mouseOverAddr(${yellowPage.id} ,'${yellowPage.addr}')" onmouseout="mouseOutAddr(${yellowPage.id} , '${yellowPage.addr}')">${fn:substring(yellowPage.addr , 0 , 15)}...</td>
				                        </c:when>
				                        <c:otherwise>
				                        	<td id="addr${yellowPage.id}">${yellowPage.addr}</td>
				                        </c:otherwise>
				                    </c:choose>
									<td >
			                          <a class="fa fa-check " onclick="saveOrUpdatePage('${yellowPage.id}');">编辑&nbsp;&nbsp;|&nbsp;</a>
			                          <a class="fa fa-check " onclick="updateSort('${yellowPage.id}');">置顶</a>
			                        </td>
									
								</tr>
							</c:forEach>
						</tbody>

						<tfoot>
							<tr>
								<td colspan="7">
									<div>
										<div style="float: left;">
											<span class="total">合计 ${yellowPage.total} 条数据</span>
											<input type="hidden" value="${yellowPage.total}" id="total">
										</div>
										<div
											style="float: right; margin-right: 10px; margin-top: 29px">
											<div style="float: left;">
												<ul class="footer_ul">
											<c:if test="${yellowPage.hasPreviousPage }">
												<li onclick="gotoPage(${currentPage-1 });"><a
													style="color: #37CED4">&lt;&lt;</a></li>
											</c:if>
											<c:if test="${yellowPage.firstPage > 1}">
												<li onclick="gotoPage(1);"
													style="border: 1px solid #9A9A9A;"><a>1</a></li>
												<c:if test="${yellowPage.firstPage > 2}">
				                        		...
				                        	</c:if>
											</c:if>
											<c:forEach items="${yellowPage.navigatepageNums }" var="page">
												<li onclick="gotoPage(${page });"
													class="<c:if test="${currentPage == page }">active</c:if>"
													style="border: 1px solid #9A9A9A;"><a>${page}</a></li>
											</c:forEach>
											<c:if test="${yellowPage.lastPage < yellowPage.pages}">
												<c:if test="${yellowPage.firstPage < yellowPage.pages - 1}">
				                        		...
				                        	</c:if>
												<li onclick="gotoPage(${yellowPage.pages});"
													style="border: 1px solid #9A9A9A;"><a>${yellowPage.pages}</a>
												</li>
											</c:if>
											<c:if test="${yellowPage.hasNextPage }">
														<li><a onclick="gotoPage(${currentPage+1});"
															style="color: #37CED4">&gt;&gt;</a></li>
													</c:if>
												</ul>
											</div>
											<div style="float: left; height: 30px;">
												<span style="color: #9A9A9A;">跳转到</span> 
												<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}"
													type="text" value="${currentPage }"
													style="width: 26px; height: 28px"onkeyup = "checInputNum(this)"> 
												<span style="color: #9A9A9A;">页</span> 
												<span class="buttonclass" id="J_JumpTo"
													onclick="gotoYellowPage(null);"><a>GO</a></span>
											</div>
										</div>
									</div>
								</td>
							</tr>
						</tfoot>
					</table>

				</div>
				<%@include file="/views/common/footer.jsp"%>
			</section>
		</section>
		
<script src="${ctx}/js/controllers/news/yellowpage/YellowPageListController.js"
	type="text/javascript"></script>
<script type="text/javascript">
//实现选中取消切换图片
$("tbody td>img").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    //$(this).parents("tr").children().each(function(){
	   // $(this).css("background","#D3F0F1");
   //});    
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
    //$(this).parents("tr").children().each(function(){
	    //$(this).css("background","");
   //});
    });
    
//实现全选切换所有选项图标
$("#all").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/honggou.png");  
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/wugou.png");  
    });
    
</script>
<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>